<template>
  <Form :model="drawer" ref="validForm" :rules="ruleValidate">
    <FormItem label="菜单名" label-position="top" prop="menuName">
      <Input v-model="drawer.menuName" placeholder="请输入菜单名" />
    </FormItem>

    <FormItem label="显示图标" label-position="top" prop="icon">
      <Select v-model="drawer.icon" placeholder="请选择菜单图标" @on-change="icon = $event">
        <template #prefix>
          <Icon :type="icon" :size="20" />
        </template>
        <Option v-for="item in iconList" :value="item" :key="item">
          <Icon :type="item" :size="25" class="icon" />
          {{ item }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="排序" label-position="top" prop="sorted">
      <InputNumber v-model="drawer.sorted" />
      <b style="padding: 0 5px">请输入排序的数字,数字越大,优先级越低</b>
    </FormItem>

    <FormItem label="菜单描述" label-position="top">
      <Input type="textarea" v-model="drawer.description" :rows="4" placeholder="请输入菜单描述信息" />
    </FormItem>

    <FormItem label="状态" label-position="top" prop="state">
      <Switch size="large" v-model="drawer.state">
        <template #open>
          <span>启用</span>
        </template>
        <template #close>
          <span>禁用</span>
        </template>
      </Switch>
    </FormItem>
    <div class="demo-drawer-footer">
      <Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
      <Button type="primary" @click="handlerForm">保存</Button>
    </div>
  </Form>
</template>

<script>
export default {
  props: {
    drawer: {
      type: Object, required: true
    }
  },
  data() {
    return {
      icon: "ios-image",
      iconList: [],
      ruleValidate: {
        menuName: [
          { required: true, message: "菜单名不允许为空", trigger: "blur" },
          { type: "string", max: "100", message: "菜单名太长", trigger: "blur" },
        ],
        icon: [
          { required: true, message: "菜单图标不允许为空", trigger: "change" },
        ],
        sorted: [
          { type: "integer", message: "排序值必须是一个整数", trigger: "blur" }
        ],
        state: [
          { type: "boolean", message: "状态必须是一个boolean类型的值", trigger: "blur" }
        ]
      }
    }
  },
  emits: ["close-win"],
  created() {
    // 使用 fetch 发送异步请求，查询当前项目中存放的 json 数据
    fetch(new URL("@/assets/json/icon.json", import.meta.url).href)
      .then(response => response.json())
      .then(ret => {
        this.iconList = ret;
      })
  },
  methods: {
    handlerForm() {
      // 校验表单参数
      this.$refs.validForm.validate(valid => {
        if (valid) {
          if (this.drawer.id == null) {
            // 调用默认插槽中定义的保存方法
            this.handlerSave();
          } else {
            // 调用默认插槽中定义的更新方法
            this.handlerUpdate();
          }
        }
      })
    },
    handlerSave() {
      console.log("保存数据");
    },
    handlerUpdate() {
      console.log("修改数据");
    },
    resetValidForm() {
      this.$refs.validForm.resetFields();
    },
  }
}
</script>

<style scoped>
.icon {
  vertical-align: middle;
  margin: 0 3px;
  ;
}

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
